“Kensington Property HTML Template” Documentation by “Tonjoo” v1.0.1

“Kensington Property HTML Template”

Created: January 14th, 2017
By: Tonjoo
Email: tonjoo@tonjoo.com

Thank you for purchasing this HTML template. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!

Getting Started
Grunt
HTML Files & Structure
Css Files
Sass (Scss) Files
Javascript Files
Source & Credits

A) Getting Started - top

Kensington Property is built on Bootstrap. We have supplied the SASS files used to build the template, if you want to use it to adjust.

The template files are located inside the HTML/Templates folder. To launch the website in your browser, you can double click on the index.html file to open the homepage.

To host the site on your server of choice, simply copy the content of the Templates folder on the server.

The images, CSS and JavaScript files are located in the HTML/Templates/assets folder.

B) Grunt - top

We use GRUNT, The Javascript Task Runner. The Grunt ecosystem is huge and it's growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort. If someone hasn't already built what you need, authoring and publishing your own Grunt plugin to npm is a breeze. See how to get started.

After the installation, Go to your project folder, open your command line and run npm install to setup your project. This command will install the packages listed in the package.json. See below to dependencies.

"devDependencies": {
	"grunt": "^1.0.1",
	"grunt-bake": "^1.7.2",
	"grunt-contrib-copy": "^1.0.0",
	"grunt-contrib-sass": "^1.0.0",
	"grunt-contrib-watch": "^1.0.0",
	"grunt-replace": "^1.0.1",
}

If you don't want use SASS or any other packages/tools you can just ignore these steps and make changes on the style.css and etc. Grunt is here just to make your work fun and to provide you a automated workflow. :)

C) HTML Files & Structure - top

All Html codes are tested an validated. There are no HTML errors. Mostly there 3 main parts in our HTML pages. Header + Main + Footer section.

We separated the pages with the tag <section> with class .page-header for page heading and class .page-section for the container of page content.

D) Css Files - top

Style.css file is our main.css file. If you don't know how to use SASS or don't need to use it, you can make your changes in style.css file. This file is also well commented and coded.

The style.css file is a combination of all styles. We use a grunt and sass to do this job. So, if you want to change a particular style, make changes to it in .scss file and don't forget to compile it with grunt.

Example: How to change color scheme in style.css file?

If you want to change the color theme, just add class .brand-yellow, .brand-red, .brand-orange, or .brand-green on the <body> tag. See the image below:

You can preview how this theme color works on the demo pages.

E) Sass (Scss) Files - top

If you want to use Scss files, please see the structure image. All Scss files all well commented and coded. Common elements are in the elements folder.

You change some predefined styles in the _themes_scss file. For example if you want to color scheme all you need to change is $brand-color varaible. This will change the color scheme with your color. See below:

// Theme variables
// ------------------------------------

// Theme yellow
$brand-yellow-primary: #FDAB26 !default;
$brand-yellow-secondary: #04203D !default;
$brand-yellow-tertiary: #041525 !default;

// Theme red
$brand-red-primary: #D32C31 !default;
$brand-red-secondary: #242424 !default;
$brand-red-tertiary: #181818 !default;

// Theme orange
$brand-orange-primary: #FA5436 !default;
$brand-orange-secondary: #1C1C1C !default;
$brand-orange-tertiary: #131313 !default;

// Theme green
$brand-green-primary: #92CA40 !default;
$brand-green-secondary: #0E4369 !default;
$brand-green-tertiary: #0B293E !default;

According to the list of scss files, as you can see in the image above. There are many files and folders. All files and folders can be divided into 4 parts. Here is the description:

1) Bootstrap

Bootstrap serves as the basis of all of the styles as: Grid Systems, Form, Button, typography, tables and others.

2) Font Icon

We used 2 font icon. The first is the most popular one, Font Awesome, and the second one we use Flaticon for the unique icons.

3) Plugins

We used 2 javascript plugin, which both have the style css support. First one is Slick Slider for product slider, and the second one is Ion Range Slider for range of product price filter.

4) Cores

There is a 4 file. function.scss containing sass mixins, elements.css containing element or component of template like Product Item, Filter Box, Pagination, Comments, Slider, Icon Box and others. And the next there is a theme.scss which serves to change the color theme for each element.

All files are combined into style.scss. if you don't need one of them, you just make it a comment, or delete the ones you don't need from the list.

F) Javascript Files - top

apps.js file is template's main javascript file. Please if you don't know what you are doing don't edit this file. One js error could affect other plugins.

apps.js file is well commentend all names are related to what they do. Please feel free to contact us if you have any problems. And please check your browser's console and make sure that you don't have any errors.

The related codes are located at the bottom of HTML pages.

G) Source & Credits - top

These are the used plugins/extensions in this template. If you want to learn more about these plugins please visit their website and help them.